<template>
  <view class="school-container" v-if="info">
    <view class="school-header">
      <navbar :title="info.shortName" v-if="page!=='home'"></navbar>
      <view class="logo">
        <swiper class="logo"
                @change="changeImgIndex"
                :circular="true">
          <swiper-item v-for="item in picArr" :key="item.url">
            <view :style="{'background-image':'url('+item.url}" class="logo"></view>
          </swiper-item>
        </swiper>
        <view class="pic-zhishi">{{ currentImg }} / {{ picArr.length }}</view>
      </view>
      <view class="school-name">{{ info.shortName }}</view>
      <view class="flex">
        <view class="tag1" v-if="info.legalPersonName">
          <image class="icon" src="@/static/blue_yuan_gou.png"></image>
          <view class="text">营业执照认证</view>
        </view>
        <view class="tag1" v-if="info.regInstitute">
          <image class="icon" src="@/static/blue_yuan_gou.png"></image>
          <view class="text">驾校运管认证</view>
        </view>
      </view>
      <view class="flex">
        <view class="tag2">班车接送</view>
        <view class="tag2">本校考试</view>
        <view class="tag2">快速过考</view>
      </view>
    </view>
    <view class="school-fields">
      <view class="group-header">
        <view class="group-label">驾校场地</view>
        <view class="more">全部场地</view>
      </view>
      <view class="field-container" v-for="field in fields" :key="field.id" @click="toField(field)">
        <view class="cover" :style="{'background-image':'url('+field.logoImg128+')'}"></view>
        <view class="field-info">
          <view class="flex">
            <view class="field-name">{{ field.name }}</view>
          </view>
          <view class="flex">
            <view class="field-address">{{ field.address }}</view>
            <!--            <view class="field-distance">{{ field.distance || 20 }}km</view>-->
          </view>
          <view class="f1"></view>
          <view class="flex h vc">
            <view :class="['field-type', 'field-type-'+field.type]">{{ field.typeStr }}</view>
            <view class="f1"></view>
            <view class="field-subjects">{{ field.subjects }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="course-group">
      <view class="group-header">
        <view class="group-label">热门班型</view>
        <view class="more">全部班型</view>
      </view>
      <view class="course-container" v-for="course in courses" :key="course.id">
        <view class="cover"></view>
        <view class="f1 flex v">
          <view class="course-name">{{ course.title }}</view>
          <view class="course-tag">{{ course.jieSongTypeStr }} {{ course.countPerCarStr }}</view>
        </view>
        <view class="course-price">
          <view class="unit">￥</view>
          {{ course.price }}
        </view>
      </view>
    </view>
    <!--    <view class="coach-group" v-if="coaches.length">-->
    <!--      <view class="group-header">-->
    <!--        <view class="group-label">驾校教练</view>-->
    <!--        <view class="more">全部教练</view>-->
    <!--      </view>-->
    <!--      <view class="coach-container" v-for="coach in coaches" :key="coach.id" @click="toCoachDetail(coach)">-->
    <!--        <view class="avatar"></view>-->
    <!--        <view class="coach-info">-->
    <!--          <view class="flex v">-->
    <!--            <view class="coach-name">{{ coach.name }}</view>-->
    <!--            <view class="coach-desc">教龄12年 学员12个</view>-->
    <!--          </view>-->
    <!--        </view>-->
    <!--        <view class="coach-btn">查看资料</view>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="tips" v-if="page !== 'home'">信息由驾校发布或来自互联网，仅供参考</view>
    <view class="contact-footer" :style="{bottom: bottom+'rpx'}">
      <view class="coupon-timedown" v-if="showTimeDown">
        <view class="tips">学车询价送1个月VIP课程</view>
        <view class="time-block">{{ timeDownStr[0] }}</view>
        <view class="time-block">{{ timeDownStr[1] }}</view>
        <view class="m-l-10">:</view>
        <view class="time-block">{{ timeDownStr[2] }}</view>
        <view class="time-block">{{ timeDownStr[3] }}</view>
        <view class="m-l-10">:</view>
        <view class="time-block">{{ timeDownStr[4] }}</view>
        <view class="time-block">{{ timeDownStr[5] }}</view>
      </view>
      <view class="icon-btn" @click="showPhone">
        <image class="icon" src="@/static/dianhua@2x.png"></image>
        <view class="text">打电话</view>
      </view>
      <!--      <view class="icon-btn" @click="showWechat">-->
      <!--        <image class="icon" src="@/static/weixin@2x.png"></image>-->
      <!--        <view class="text">加微信</view>-->
      <!--      </view>-->
      <view class="xunjia-btn" @click="showZixun">学车询价</view>
    </view>
    <ZixunDialog ref="ZixunDialog" @success="onZixunSubmit" :page="page"></ZixunDialog>
    <InviterDialog ref="InviterDialog" @enter="toUseCoupon"></InviterDialog>
  </view>
</template>

<script>
import {schoolApi} from "@/api";
import Navbar from "@/components/navbar.vue";
import {mapGetters, mapActions} from 'vuex'
import ZixunDialog from "@/components/ZixunDialog.vue";
import InviterDialog from "../../components/InviterDialog.vue";
import day from "@/vendor/day";

export default {
  components: {InviterDialog, ZixunDialog, Navbar},
  props: ['schoolId', 'page'],
  data() {
    return {
      info: null,
      fields: [],
      courses: [],
      coaches: [],
      time: 0,
      currentImg: 1,
      showTimeDown: false,
    }
  },
  computed: {
    ...mapGetters(['platform', 'settings', 'selectedLocation']),
    picArr() {
      const list = []

      if (!this.info) {
        return list
      }

      if (this.info.logoImg) {
        list.push({
          type: 'pic',
          url: this.info.logoImg512
        })
      }

      this.fields.map(field => {
        list.push({
          type: 'pic',
          url: field.logoImg512
        })
      })

      return list
    },
    timeDownStr() {
      return day().hour(0).minute(0).second(this.time).format('HHmmss')
    },
    bottom() {
      // h5在底部导航页面渲染有问题，兼容一下
      if (this.platform === 'web') {
        if (this.page === 'home') {
          return 90
        }
      }

      return 0
    }
  },
  async created() {
    const res = await schoolApi.info(this.schoolId)
    this.info = res.data.data.school
    this.fields = res.data.data.fields
    this.coaches = res.data.data.coaches
    this.courses = res.data.data.courses
    if (this.info.couponVipStatus) {
      setTimeout(() => {
        this.showCoupon()
      }, 500)
    }
  },
  methods: {
    ...mapActions(['refreshUser']),
    changeImgIndex(e) {
      const {current} = e.detail
      this.currentImg = current + 1
    },
    toCoachDetail(info) {
      uni.navigateTo({
        url: '/pages/coach_info/coach_info?id=' + info.id
      })
    },
    toField(info) {
      // uni.navigateTo({
      //   url: '/pages/map/map?longitude=' + info.longitude + '&latitude=' + info.latitude + '&title=' + info.name
      // })

      // uni.chooseLocation({
      //   success: function (res) {
      //     console.log('success', res);
      //   }
      // })

      uni.openLocation({
        latitude: info.latitude,
        longitude: info.longitude,
        name: info.name,
        address: info.address,
        success: function () {
          console.log('success');
        }
      });
    },
    showZixun() {
      this.$refs.ZixunDialog.open(this.info, this.selectedLocation)
    },
    showPhone() {
      if (!this.info.enrollPhone) {
        uni.showToast({
          title: '驾校未填写电话，请换其他方式联系！',
          icon: 'none',
          duration: 2000
        });
        return
      }

      uni.makePhoneCall({
        phoneNumber: this.info.enrollPhone
      })
    },
    showCoupon() {
      if (this.showTimeDown === false) {
        this.showTimeDown = true
        this.time = 60 * 60 * 24
        this._h = setInterval(() => {
          if (this.time - 1 <= 0) {
            this.time = 0
            clearInterval(this._h)
            return
          }

          this.time--
        }, 1000)
      }
      this.$refs.InviterDialog.open(this.info.logoImg)
    },
    toUseCoupon() {
      this.showZixun()
    },
    onZixunSubmit() {
      if (this.info.couponVipStatus) {
        this.refreshUser()
      }
    },
    showWechat() {
      if (!this.info.wechat) {
        uni.showToast({
          title: '驾校未填写微信，请换其他方式联系！',
          icon: 'none',
          duration: 2000
        });
        return
      }
      uni.showModal({
        title: '咨询微信：' + this.info.wechat,
        confirmText: '复制',
        showCancel: false,
        success: () => {
          uni.setClipboardData({
            showToast: true,
            data: this.info.wechat
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background-color: #f9f9f9;
}

.school-container {
  background-color: #f9f9f9;
  padding-bottom: 200rpx;

  .coupon-timedown {
    position: absolute;
    height: 66rpx;
    background-color: #FDE6C6;
    left: 0;
    right: 0;
    top: -66rpx;
    color: #FD2242;
    display: flex;
    align-items: center;
    padding-right: 30rpx;

    .tips {
      text-align: center;
      font-weight: bold;
      color: #FD2242;
      flex: 1;
    }

    .time-block {
      width: 40rpx;
      height: 40rpx;
      margin-left: 10rpx;
      border-radius: 8rpx;
      background-color: #FD2242;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
    }
  }

  .tips {
    color: #999;
    text-align: center;
  }

  .group-header {
    display: flex;

    .group-label {
      font-size: 16px;
      font-weight: bold;
      color: #000;
      margin-left: 30rpx;
      margin-top: 30rpx;
      flex: 1;
    }

    .more {
      margin-top: 34rpx;
      margin-right: 30rpx;
      color: #959595;
    }
  }

  .coupon-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 101;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);

    .coupon {
      position: relative;
      background-image: url("http://down.qwdata.vip/app_icon/1688054600413");
      width: 505rpx;
      height: 652rpx;
      background-size: contain;

      .teacher {
        display: flex;
        flex-direction: column;
        align-items: center;

        .avatar {
          width: 92rpx;
          height: 92rpx;
          border-radius: 46rpx;
          margin-top: 44rpx;
        }

        .nickname {
          font-size: 13px;
          color: #FFD9B1;
          margin-bottom: 30rpx;
          margin-top: 24rpx;
        }
      }

      .title {
        color: #fff;
        font-size: 34px;
        font-weight: bold;
        text-align: center;
      }

      .tips {
        margin-top: 20rpx;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.9);
        text-align: center;
      }

      .btn {
        background-color: rgba(14, 87, 205, 0);
        height: 90rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: absolute;
        bottom: 60rpx;
        left: 60rpx;
        right: 60rpx;
        border-radius: 40rpx;
      }
    }
  }

  .school-header {
    background-color: #fff;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;

    .logo {
      width: 750rpx;
      height: 466rpx;
      background-position: center;
      background-size: cover;
      position: relative;

      .pic-zhishi {
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        position: absolute;
        bottom: 20rpx;
        left: 20rpx;
        height: 60rpx;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30rpx;
      }
    }

    .school-name {
      font-size: 19px;
      color: #000;
      font-weight: bold;
      margin-left: 30rpx;
      margin-top: 36rpx;
      flex: 1;
    }

    .tag1 {
      margin-top: 20rpx;
      display: flex;
      margin-left: 30rpx;

      .icon {
        width: 28rpx;
        height: 30rpx;
        margin-right: 10rpx;
      }

      .text {
        font-size: 12px;
        color: #3f3f3f;
      }
    }

    .tag2 {
      margin-top: 28rpx;
      background-color: #f2f7ff;
      color: #0D94FF;
      font-size: 12px;
      padding: 10rpx 20rpx;
      margin-left: 20rpx;

      &:first-child {
        margin-left: 30rpx;
      }
    }

    .school-info-btn {
      font-size: 14px;
      color: #959595;
      margin-top: 42rpx;
      margin-right: 30rpx;
    }
  }

  .coach-group {
    background-color: #fff;
    padding-bottom: 1rpx;

    .coach-container {
      display: flex;
      align-items: center;

      .avatar {
        width: 98rpx;
        height: 98rpx;
        background-color: #eee;
        border-radius: 49rpx;
        margin: 32rpx 35rpx 30rpx 35rpx;
      }

      .coach-info {
        flex: 1;
        display: flex;

        .coach-name {
          font-size: 15px;
          font-weight: bold;
          color: #000;
        }

        .coach-desc {
          margin-top: 6rpx;
          font-size: 13px;
          color: #909090;
        }
      }

      .coach-btn {
        background: #0095FE;
        border-radius: 32rpx;
        height: 64rpx;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        padding: 0 32rpx;
        margin-right: 30rpx;
      }
    }
  }

  .course-group {
    background-color: #fff;
    margin-bottom: 30rpx;

    .group-label {
      margin-bottom: 20rpx;
    }

    .flow-body {
      flex-wrap: wrap;
      display: flex;
      padding-left: 10rpx;
    }

    .course-container {
      padding-bottom: 30rpx;
      display: flex;
      position: relative;

      .cover {
        width: 140rpx;
        height: 140rpx;
        background-color: #eee;
        margin-left: 30rpx;
        margin-right: 30rpx;
        border-radius: 10rpx;
        background-image: url("http://down.qwdata.vip/app_icon/1682157489098");
        background-size: cover;
        background-position: center;
      }

      .course-name {
        margin-top: 13rpx;
        font-size: 16px;
        color: #232323;
        font-weight: bold;
      }

      .course-tag {
        font-size: 12px;
        color: #626262;
        margin-top: 12rpx;
      }

      .course-price {
        font-size: 22px;
        color: #f65636;
        font-weight: bold;
        display: flex;
        position: absolute;
        align-items: center;
        right: 20rpx;
        top: 40rpx;

        .unit {
          font-size: 12px;
          font-weight: normal;
        }
      }
    }
  }

  .school-fields {
    background-color: #fff;
    padding-top: 1px;
    margin-bottom: 30rpx;

    .field-container {
      padding: 30rpx;
      display: flex;

      .field-info {
        width: 490rpx;
        display: flex;
        flex-direction: column;
      }

      .cover {
        width: 180rpx;
        height: 140rpx;
        background-position: center;
        background-size: cover;
        border-radius: 10rpx;
        margin-right: 30rpx;
      }

      .field-name {
        font-size: 16px;
        color: #232323;
        font-weight: bold;
        flex: 1;
      }

      .field-subjects {
        color: #808080;
        font-size: 13px;
      }

      .field-address {
        font-size: 12px;
        color: #909090;
        margin-top: 10rpx;
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .field-type {
        margin-top: 6rpx;
        color: #fff;
        font-weight: bold;
        font-size: 12px;
        padding: 5rpx 15rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5rpx;

        &-3 {
          background-color: #ffd56a;
        }

        &-2 {
          background-color: #4fdaab;
        }

        &-1 {
          background-color: #a97def;
        }
      }

      .field-distance {
        margin-top: 6rpx;
        color: #5A5A5A;
      }
    }
  }

  .contact-footer {
    box-shadow: 0 4upx 20upx 0 rgba(0, 0, 0, 0.1);
    height: 120rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 99;
    left: 0;
    right: 0;
    display: flex;
    padding: 0 30rpx;

    .icon-btn {
      width: 120rpx;
      display: flex;
      align-items: center;
      flex-direction: column;

      .icon {
        margin-top: 14rpx;
        width: 52rpx;
        height: 52rpx;
      }

      .text {
        font-size: 12px;
        color: #151515;
        font-weight: bold;
      }
    }

    .xunjia-btn {
      height: 80rpx;
      margin-left: 30rpx;
      margin-top: 20rpx;
      color: #fff;
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 16px;
      justify-content: center;
      border-radius: 45rpx;
      background-color: #3073f6;
    }
  }
}

</style>
